<template>
	<view class="content">
			<view class="whead">
				<view class="left logoLeft">
					<image src="../../static/img/logo.png" mode=""></image>
				</view>
				<view class="center logoCenter">
					<view class="searchBox">
						<view class="inp">
							<input type="text" value="" placeholder="搜索你想要的产品" />
						</view>
						<view class="r">
							<image src="../../static/img/sou.png" mode=""></image>
						</view>
					</view>
				</view>
				<view class="right">
					取消
				</view>
			</view>
            
			<view class="classCon">
				<view class="left">
					<view class="li active">
						<view class="ico">
							<image src="../../static/img/ico1.png" mode="widthFix"></image>
						</view>
						<view class="text">
							电脑整机
						</view>
					</view>
					<view class="li">
						<view class="ico">
							<image src="../../static/img/ico2.png" mode="widthFix"></image>
						</view>
						<view class="text">
							电脑整机
						</view>
					</view>
					<view class="li">
						<view class="ico">
							<image src="../../static/img/ico3.png" mode="widthFix"></image>
						</view>
						<view class="text">
							电脑整机
						</view>
					</view>
					<view class="li">
						<view class="ico">
							<image src="../../static/img/ico4.png" mode="widthFix"></image>
						</view>
						<view class="text">
							电脑整机
						</view>
					</view>
					<view class="li">
						<view class="ico">
							<image src="../../static/img/ico5.png" mode="widthFix"></image>
						</view>
						<view class="text">
							电脑整机
						</view>
					</view>
					<view class="li">
						<view class="ico">
							<image src="../../static/img/ico6.png" mode="widthFix"></image>
						</view>
						<view class="text">
							电脑整机
						</view>
					</view>
					<view class="li">
						<view class="ico">
							<image src="../../static/img/ico7.png" mode="widthFix"></image>
						</view>
						<view class="text">
							电脑整机
						</view>
					</view>
					<view class="li">
						<view class="ico">
							<image src="../../static/img/ico8.png" mode="widthFix"></image>
						</view>
						<view class="text">
							电脑整机
						</view>
					</view>
					<view class="li">
						<view class="ico">
							<image src="../../static/img/ico9.png" mode="widthFix"></image>
						</view>
						<view class="text">
							电脑整机
						</view>
					</view>
				</view>
				<view class="right">
					<view class="tit">
						好店推荐
					</view>
					<view class="tuijian">
						<view class="li">
							<image src="../../static/img/dell.png" mode="widthFix"></image>
						</view>
						<view class="li">
							<image src="../../static/img/hp.png" mode="widthFix"></image>
						</view>
					</view>
					<view class="tit">
						手机
					</view>
					<view class="tulist">
						<view class="li">
							<view class="imgBox">
								<image src="../../static/img/sj.png" mode=""></image>
							</view>
							<view class="text">
								oppo
							</view>
						</view>
						<view class="li">
							<view class="imgBox">
								<image src="../../static/img/sj.png" mode=""></image>
							</view>
							<view class="text">
								oppo
							</view>
						</view>
						<view class="li">
							<view class="imgBox">
								<image src="../../static/img/sj.png" mode=""></image>
							</view>
							<view class="text">
								oppo
							</view>
						</view>
						<view class="li">
							<view class="imgBox">
								<image src="../../static/img/sj.png" mode=""></image>
							</view>
							<view class="text">
								oppo
							</view>
						</view>
						<view class="li">
							<view class="imgBox">
								<image src="../../static/img/sj.png" mode=""></image>
							</view>
							<view class="text">
								oppo
							</view>
						</view>
						<view class="li">
							<view class="imgBox">
								<image src="../../static/img/sj.png" mode=""></image>
							</view>
							<view class="text">
								oppo
							</view>
						</view>
						
					</view>
					<view class="tit">
						手机
					</view>
					<view class="tulist">
						<view class="li">
							<view class="imgBox">
								<image src="../../static/img/sj.png" mode=""></image>
							</view>
							<view class="text">
								oppo
							</view>
						</view>
						<view class="li">
							<view class="imgBox">
								<image src="../../static/img/sj.png" mode=""></image>
							</view>
							<view class="text">
								oppo
							</view>
						</view>
						<view class="li">
							<view class="imgBox">
								<image src="../../static/img/sj.png" mode=""></image>
							</view>
							<view class="text">
								oppo
							</view>
						</view>
						<view class="li">
							<view class="imgBox">
								<image src="../../static/img/sj.png" mode=""></image>
							</view>
							<view class="text">
								oppo
							</view>
						</view>
						<view class="li">
							<view class="imgBox">
								<image src="../../static/img/sj.png" mode=""></image>
							</view>
							<view class="text">
								oppo
							</view>
						</view>
						<view class="li">
							<view class="imgBox">
								<image src="../../static/img/sj.png" mode=""></image>
							</view>
							<view class="text">
								oppo
							</view>
						</view>
						
					</view>
				</view>
			</view>
    </view>
</template>

<script>
	import "../../static/css/main.css"
	export default {
		data() {
			return {
				title: 'Hello'
			}
		},
		onLoad() {

		},
		methods: {

		}
	}
</script>

<style  lang="less">
	.content {
		text-align: left;
		height: 100%;
		background: #eee;
	}
	uni-page-body{height: 100%;}
    .classCon{clear: both; width: 100%; height: auto; overflow: hidden; background: #eee; padding-top:20rpx; padding-bottom:100rpx;
		.left{float: left; width: 200rpx; height: auto;
			.li{clear: both; width: 100%; height: 102rpx; padding: 30rpx 10rpx; border-bottom: 1px solid #ccc; background: #fff;
				&.active{background: #eee;}
				.ico{display: inline-block; width: 40rpx; height: 40rpx; overflow: hidden;
					image{width: 100%; height: 100%;}
				}
				.text{display: inline-block; line-height: 40rpx; font-size: 28rpx; color:#333; vertical-align:text-top; padding-left:8rpx}
			}
		}
		.right{float: left; width: calc(100% - 200rpx); padding:16rpx;
			.tit{clear: both; line-height: 80rpx; font-size: 32rpx; color:#333}
			.tuijian{clear: both; width: 100%; background:#fff; height:auto; overflow:hidden; padding:20rpx 0;
				.li{display: inline-block; width: 160rpx; height: 80rpx; float:left;
					image{width: 100%; height: 100%;}
				}
			}
			.tulist{clear: both; width: 100%; height: auto; overflow: hidden; background: #fff; padding:10rpx;
				.li{width: 33.3%; height:auto; position: relative; padding:10rpx; float:left;
					.imgBox{clear: both; width: 100%; height:0; position: relative; padding-top: 100%; overflow:hidden;
						image{position: absolute; left:0; top: 0; width: 100%; height: 100%;}
					}
					.text{clear: both; width: 100%; height: 50rpx; line-height: 50rpx; color:#999; font-size: 24rpx; text-align: center;}
				}
			}
		}
	}
</style>
